<template>
    <div>
       <div>
           <el-table :data="emps"  v-loading="loading"
                     element-loading-text="加载中">

               <el-table-column type="selection" align="center" width="55"></el-table-column>
               <el-table-column type="index" align="center" width="55" label="序号"></el-table-column>
               <el-table-column prop="name" label="姓名"  width="120" align="centen"></el-table-column>
               <el-table-column prop="workID" label="工号" width="120" align="center"></el-table-column>
               <el-table-column prop="email" label="电子邮件" width="200" align="center"></el-table-column>
               <el-table-column prop="phone" label="电话号码" width="120" align="center"></el-table-column>
               <el-table-column prop="department.name" label="所属部门" width="120" align="center"></el-table-column>
               <el-table-column label="工资账套" align="center">
                   <template slot-scope="scope" >
                       <el-tooltip placement="right" v-if="scope.row.salary">
                           <div slot="content">
                               <table>
                                   <tr>
                                       <td><el-tag>基本工资</el-tag></td>
                                       <td>{{scope.row.salary.basicSalary}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>交通补助</el-tag></td>
                                       <td>{{scope.row.salary.trafficSalary}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>午餐补助</el-tag></td>
                                       <td>{{scope.row.salary.lunchSalary}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>奖金</el-tag></td>
                                       <td>{{scope.row.salary.bonus}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>养老金比率</el-tag></td>
                                       <td>{{scope.row.salary.pensionPer}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>养老金基数</el-tag></td>
                                       <td>{{scope.row.salary.pensionBase}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>医疗保险比率</el-tag></td>
                                       <td>{{scope.row.salary.medicalPer}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>医疗保险基数</el-tag></td>
                                       <td>{{scope.row.salary.medicalBase}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>公积金比率</el-tag></td>
                                       <td>{{scope.row.salary.accumulationFundPer}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>公积金基数</el-tag></td>
                                       <td>{{scope.row.salary.accumulationFundBase}}</td>
                                   </tr>
                                   <tr>
                                       <td><el-tag>启用时间</el-tag></td>
                                       <td>{{scope.row.salary.createDate}}</td>
                                   </tr>
                               </table>
                           </div>
                           <el-tag>{{scope.row.salary.name}}</el-tag>
                       </el-tooltip>
                       <el-tag v-else type="danger">暂未设置</el-tag>
                   </template>
               </el-table-column>
               <el-table-column label="操作" align="center">
                   <template slot-scope="scope">
                       <el-popover
                               placement="right"
                               title="修改工资套账"
                               width="200"
                               trigger="click"
                                @show="showPop(scope.row.salary)"
                                @hide="hidePop(scope.row)">
                           <div>
                               <el-select v-model="currentSalary" placeholder="请选择">
                                   <el-option
                                           v-for="item in AllSalary"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id">
                                   </el-option>
                               </el-select>
                           </div>
                           <el-button type="primary"  slot="reference">修改工资套账</el-button>
                       </el-popover>

                   </template>
               </el-table-column>
           </el-table>
       </div>
        <div style="display: flex;justify-content: space-between;margin-top: 10px">
            <el-button type="danger">批量删除</el-button>
            <el-pagination
                    background
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    :total="total"
            @size-change="sizeChange"
            @current-change="currentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SalSobCfg",
        data(){
            return{
                emps:[],
                AllSalary:[],
                currentSalary:null,
                pageSize:10,
                current:0,
                total:0,
                loading:false
            }
        },
        mounted(){
            this.initEmps();
            this.initSalary();
        },
        methods:{
            sizeChange(pageSize){
                this.pageSize = pageSize
                this.initEmps();
            },
            currentChange(current){
                this.current =current;
                this.initEmps();
            },
            hidePop(data){
                if(this.currentSalary && this.currentSalary!= data.salary.id){
                    this.putRequest('/api/salary/sobcfg/?empId=' +data.id + '&salaryId=' + this.currentSalary).then(resp=>{
                        if(resp){
                            this.initEmps();
                        }
                    })
                }

            },
            showPop(data){
                console.log(data)
                if(data){
                    this.currentSalary = data.id
                }else{
                    this.currentSalary =null
                }
            },
            initEmps(){
                this.loading =true
                this.getRequest('/api/salary/sobcfg/?pageSize=' + this.pageSize + '&current=' + this.current).then(resp=>{
                    this.loading =false
                    if(resp){
                        this.emps = resp.list;
                        this.total = resp.total;
                    }
                })
            },
            initSalary(){
                this.getRequest('/api/salary/sobcfg/getAllSalary').then(resp=>{
                    if(resp){
                        this.AllSalary = resp;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>